<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="18">
                <div class="me-view-card">
                    <el-card shadow="hover">
                            <el-button
                                    v-if="canEdit"
                                    @click="editArticle()"
                                    style="position: absolute;left: 60%;"
                                    size="mini"
                                    round
                                    icon="el-icon-edit">编辑
                            </el-button>

                        <div class="originalImg"></div>
                        <h1 class="me-view-title">{{blog.articleTitle}}</h1>
                        <el-divider content-position="right">
                            <div class="me-view-meta">
                                <span style="margin-right: 3px">{{blog.articleDate}}</span>
                                <span style="margin-right: 3px">阅读{{blog.articleViews?blog.articleViews:'N'}}</span>
                                <span style="margin-right: 3px">评论{{blog.articleCommentCount?blog.articleCommentCount:'N'}}</span>
                                <span style="margin-right: 3px">获赞{{blog.articleLikeCount?blog.articleLikeCount:'N'}}</span>
                            </div></el-divider>
                        <div class="me-view-content">
                            <div class="markdown-body" v-html="blog.articleContent"></div>
                        </div>

                        <div class="praise-box">
                            <el-button @click="follow" style="font-size: 50px" :type="button.type" :icon="button.icon" circle></el-button>
                        </div>
                    </el-card>
                    <div class="me-view-end">
                        <el-alert
                                title="The End"
                                type="success"
                                center
                                :closable="false">
                        </el-alert>
                    </div>

                    <div class="me-view-tag">
                        标签：
                        <el-tag v-for="item in blogLabels" :key="item.value" class="me-view-tag-item" :type="tagColor[Math.floor((Math.random()*tagColor.length))]">
                            {{item.label}}
                        </el-tag>
                    </div>

                    <div class="me-view-tag">
                        文章分类：
                        <!--<span style="font-weight: 600">{{article.category.categoryName}}</span>-->
                        <el-button v-for="item in blogSorts" :key="item.value" size="mini" type="primary" round plain>
                            {{item.label}}
                        </el-button>
                    </div>

                    <div class="me-view-comment">
                        <div class="me-view-comment-write">
                            <el-row :gutter="20">
                                <el-col :span="2">
                                    <a class="">
                                        <img class="me-view-picture" :src="avatar"/>
                                        <!--                                        <img class="me-view-picture" :src="user.userFace"/>-->
                                    </a>
                                </el-col>
                                <el-col :span="22">
                                    <el-input
                                            type="textarea"
                                            :autosize="{ minRows: 2}"
                                            placeholder="你的评论..."
                                            class="me-view-comment-text"
                                            v-model="comment.content"
                                            resize="none">
                                    </el-input>
                                </el-col>
                            </el-row>

                            <el-row :gutter="20">
                                <el-col :span="2" :offset="22">
                                    <el-button type="text" @click="publishComment()">评论</el-button>
                                </el-col>
                            </el-row>
                        </div>

                        <div class="me-view-comment-title">
                            <span>{{blog.articleCommentCount?blog.articleCommentCount:0}} 条评论</span>
                        </div>

                        <CommentItem
                                v-for="(c,index) in comments"
                                :comment="c"
                                :articleId="article.id"
                                :index="index"
                                :rootCommentCounts="comments.length"
                                @commentCountsIncrement="commentCountsIncrement"
                                :key="c.id">
                        </CommentItem>

                    </div>

                </div>
            </el-col>
            <el-col :span="6">
                <el-row>
                    <div class="author_info">
                        <div class="me-view-author">
                            <a class="img_con"><img class="me-view-picture" :src="avatar"/></a>
                            <span style="margin-left: 20px">{{blog.userId}}</span>
                            <div class="data-box">
                                <div class="article-box">
                                    <div style="margin-bottom: 8px;">阅读量
                                        <div>{{blog.articleViews?blog.articleViews:'N'}}</div>
                                    </div>
                                </div>
                                <div class="article-box">
                                    <div style="margin-bottom: 8px;">获赞数
                                        <div>{{blog.articleLikeCount?blog.articleLikeCount:'N'}}</div>
                                    </div>
                                </div>
                                <div class="article-box">
                                    <div style="margin-bottom: 8px;">博文篇
                                        <div>{{blog.articleCommentCount?blog.articleCommentCount:'N'}}</div>
                                    </div>
                                </div>
                                <el-button style="margin-top: 16px;text-align: center;" type="primary" round>点击此处，查看作者详情</el-button>
                            </div>
                        </div>
                    </div>
                </el-row>
                <el-row>
                    <div v-for="otherBlog in authorOtherBlogs" :key="otherBlog.articleId">
                        <el-divider></el-divider>
                        <el-link>
                            <div style="margin-left: 3px" class="el-icon-notebook-2">{{otherBlog.articleTitle}}</div>
                            <div class="el-icon-timer">{{otherBlog.articleDate}}</div>
                        </el-link>
                    </div>
                </el-row>
            </el-col>
        </el-row>

        <GoTop></GoTop>
    </div>
</template>

<script>
    import CommentItem from "../../components/blog/CommentItem";

    import default_avatar from '../../assets/image/logo.png'
    import GoTop from "../../components/blog/GoTop";

    export default {
        name: 'BlogView',
        data() {
            return {
                authorOtherBlogs: [],
                tagColor: ["success","info","warning","danger",""],
                // user: window.sessionStorage.getItem('user'),
                user: {},
                article: {
                    id: '',
                    title: '',
                    commentCounts: 0,
                    viewCounts: 0,
                    summary: '',
                    author: {},
                    tags: [],
                    category: {},
                    createDate: '',
                    editor: {
                        value: '',
                        toolbarsFlag: false,
                        subfield: false,
                        defaultOpen: 'preview'
                    }
                },
                blog: {
                    "articleId": '',
                    "userId": '',
                    "articleTitle": '',
                    "articleDescription": '',
                    "articleCover": null,
                    "articleContent": '',
                    "articleViews": null,
                    "articleCommentCount": null,
                    "articleDate": '',
                    "articleLikeCount": null,
                    "articleType": '',
                    "articleTop": null,
                    "articleCan": null
                },
                blogLabels: null,
                blogSorts: null,
                comments: [],
                comment: {
                    article: {},
                    content: ''
                },
                button: {
                    type: 'primary',
                    icon: 'el-icon-minus',
                },
                canEdit: false,
            }
        },
        computed: {
            avatar() {
                if (this.user.userFace) {
                    return this.user.userFace
                }
                return default_avatar
            },
            title() {
                return `${this.blog.articleTitle} - 文章`
            }
        },
        mounted() {
            this.blog.articleId = this.$route.query.id;
            this.initBlog();
        },
        methods: {
            getAuthorOtherBlogs(){
                this.getRequest('/articles/selectArticleByUserName/' + this.blog.userId).then(resp => {
                    if (resp) {
                        this.authorOtherBlogs = resp.data;
                    }
                })
            },
            editArticle() {
                this.$router.push({path: '/common/CommonBlogEdit', query: {id: this.blog.articleId}})
            },
            publishComment() {
                let that = this
                if (!that.comment.content) {
                    return;
                }
                that.comment.article.id = that.article.id
                // let parms = {articleId:that.article.id,content:that.comment.content}
                // publishComment(parms,this.$store.state.token).then(data => {
                //     if(data.success){
                //         that.$message({type: 'success', message: '评论成功', showClose: true})
                //         that.comment.content = ''
                //         that.comments.unshift(data.data)
                //         that.commentCountsIncrement()
                //
                //     }else{
                //         that.$message({type: 'error', message: data.msg, showClose: true})
                //     }
                //
                // }).catch(error => {
                //     if (error !== 'error') {
                //         that.$message({type: 'error', message: '评论失败', showClose: true})
                //     }
                // })
            },

            getCommentsByArticle() {
                // let that = this
                // getCommentsByArticle(that.article.id).then(data => {
                //     if(data.success){
                //         that.comments = data.data
                //     }else{
                //         that.$message({type: 'error', message: '评论加载失败', showClose: true})
                //     }
                // }).catch(error => {
                //     if (error !== 'error') {
                //         that.$message({type: 'error', message: '评论加载失败', showClose: true})
                //     }
                // })
            },
            commentCountsIncrement() {
                this.article.commentCounts += 1
            },
            initBlog() {
                this.getRequest('/articles/selectOneArticle/' + this.blog.articleId).then(resp => {
                    if (resp) {
                        this.blog = resp.data;
                        var MardownIt = require("markdown-it");
                        var md = new MardownIt();
                        var result = md.render(this.blog.articleContent);
                        this.blog.articleContent = result;
                        this.initUser();
                        this.initLabel();
                        this.initSort();
                        this.getAuthorOtherBlogs();
                        console.log("========");
                        if(null == JSON.parse(window.sessionStorage.getItem('user'))){
                            this.canEdit =  false;
                        } else if(this.blog.userId == JSON.parse(window.sessionStorage.getItem('user')).username){
                            this.canEdit =  true;
                        }else{
                            this.canEdit =  false;
                        }
                    }
                })
            },
            initUser() {
                this.getRequest('/admin/select/' + this.blog.userId).then(resp => {
                    if (resp) {
                        this.user = resp.data;
                    }
                })
            },
            initSort() {
                this.getRequest('/sorts/selectOneSortOptions/' + this.blog.articleId).then(resp => {
                    if (resp) {
                        this.blogSorts = resp;
                    }
                })
            },
            initLabel() {
                this.getRequest('/labels/selectOneLabelsOptions/' + this.blog.articleId).then(resp => {
                    if (resp) {
                        this.blogLabels = resp;
                    }
                })
            },
            follow(){
                if(this.button.icon=='el-icon-minus'){
                    this.button.icon = 'fa fa-thumbs-up'
                    this.button.type = 'primary'
                    this.blog.articleLikeCount+=1;
                    this.$message({
                        message: '感谢喜欢💕',
                        type: 'success'
                    });
                }else{
                    this.button.icon = 'el-icon-minus'
                    this.button.type = 'primary'
                    this.blog.articleLikeCount-=1;
                    this.$message("感谢鞭策😶‍🌫️")
                }
            },
        },
        components: {
            GoTop,
            CommentItem
        },
        //组件内的守卫 调整body的背景色
        beforeRouteEnter(to, from, next) {
            window.document.body.style.backgroundColor = '#fff';
            next();
        },
        beforeRouteLeave(to, from, next) {
            window.document.body.style.backgroundColor = '#f5f5f5';
            next();
        },


    }
</script>

<style>
    .me-view-body {
        margin: 100px auto 140px;
    }

    .me-view-container {
        width: 800px;
    }

    .el-main {
        overflow: hidden;
    }

    .me-view-title {
        font-size: 34px;
        font-weight: 800;
        line-height: 1.3;
    }

    .me-view-author {
        /*margin: 30px 0;*/
        margin-top: 30px;
        vertical-align: middle;
    }

    .me-view-picture {
        width: 40px;
        height: 40px;
        border: 1px solid #ddd;
        border-radius: 50%;
        vertical-align: middle;
        background-color: #5fb878;
    }

    .me-view-info {
        display: inline-block;
        vertical-align: middle;
        margin-left: 8px;
    }

    .me-view-meta {
        font-size: 12px;
        color: #969696;
    }

    .me-view-end {
        margin-top: 20px;
    }

    .me-view-tag {
        margin-top: 20px;
        padding-left: 6px;
        border-left: 4px solid #c5cac3;
    }

    .me-view-tag-item {
        margin: 0 4px;
    }

    .me-view-comment {
        margin-top: 60px;
    }

    .me-view-comment-title {
        font-weight: 600;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 20px;
    }

    .me-view-comment-write {
        margin-top: 20px;
    }

    .me-view-comment-text {
        font-size: 16px;
    }

    .v-show-content {
        padding: 8px 25px 15px 30px !important;
    }

    .v-note-wrapper .v-note-panel {
        box-shadow: none !important;
    }

    .v-note-wrapper .v-note-panel .v-note-show .v-show-content, .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html {
        background: #fff !important;
    }

    .originalImg {
        background: url('https://static3.sycdn.imooc.com/static/img/article/original.png?t=2');
        background-position: 0 0;
        background-size: 64px;
        width: 64px;
        height: 64px;
        position: absolute;
        left: 10px;
        top: 0;
    }

    .author_info {
        height: 232px;
        background: rgba(43, 51, 59, .06);
        border-radius: 12px;
        box-sizing: border-box;
        padding: 20px 0 20px 20px;
    }

    .img_con {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
    }

    .data-box {
        width: 220px;
        height: 43px;
        margin: 0 auto 32px;
        text-align: center;
    }

    .article-box {
        margin-right: 24px;
        float: left;
    }

    .praise-box{
        position: relative;
        width: 100%;
        margin: 48px 0 0 0;
        text-align: center;
    }


</style>
